import { Layout, Menu, Dropdown, Avatar, Space } from 'antd/lib/index';
import { UserOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons/lib/index';
import Image from 'next/image';
import { useRouter } from 'next/router';

const { Header } = Layout;

const HeaderComponent = () => {
  const router = useRouter();

  // 用户下拉菜单项
  const userMenu = (
    <Menu
      items={[
        {
          key: 'profile',
          icon: <UserOutlined />,
          label: '个人中心',
          onClick: () => router.push('/profile'),
        },
        {
          type: 'divider',
        },
        {
          key: 'logout',
          icon: <LogoutOutlined />,
          label: '退出登录',
          onClick: () => {
            // 这里处理退出登录逻辑
            console.log('退出登录');
          },
        },
      ]}
    />
  );

  return (
    <Header style={{ 
      padding: '0 20px', 
      background: '#001529', 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center',
      color: '#fff',
    }}>
      {/* Logo 区域 */}
      <div className="logo" style={{ display: 'flex', alignItems: 'center' }}>
        <Image
          src="https://env-00jxh6hdltnq.normal.cloudstatic.cn/1724485260190.png?expire_at=1731035260&er_sign=a21eba5bf0fb17325ec8b63a0c4861cb"  // 替换为你的 logo 路径
          alt="Logo"
          width={120}
          height={32}
        />
      </div>

      {/* 用户信息区域 */}
      <div className="user-info">
        <Dropdown overlay={userMenu} placement="bottomRight">
          <Space style={{ cursor: 'pointer' }}>
            <Avatar icon={<UserOutlined />} />
            <span>管理员</span>
          </Space>
        </Dropdown>
      </div>
    </Header>
  );
};

export default HeaderComponent;
